import React, { useEffect, useState } from 'react';
import { Select, Button, Input, DatePicker } from 'antd';
import { SearchOutlined, ReloadOutlined } from '@ant-design/icons';
import style from '@/pages/IndexPage.css';
import zhCN from 'antd/es/date-picker/locale/zh_CN';

function TableSelector({ modelTypes, onSearch }) {
    const [energyType, setEnergyType] = useState('all');
    const [meterName, setMeterName] = useState('');
    const [registerCode, setRegisterCode] = useState('');
    return (
        <div className={style['card-container']} style={{ boxShadow: 'none' }}>
            <div className={style['card-title']}>
                <span>查询表格</span>
            </div>
            <div
                className={style['card-content']}
                style={{
                    padding: '0',
                    display: 'flex',
                    alignItems: 'center',
                    padding: '0 1rem',
                    whiteSpace:'nowrap'
                }}
            >
                <div
                    style={{
                        display: 'inline-flex',
                        alignItems: 'center',
                        width: '240px',
                        marginRight: '1rem',
                    }}
                >
                    <span>设备类型</span>
                    <Select style={{ flex:'1', marginLeft:'0.5rem' }} value={energyType} onChange={value=>setEnergyType(value)}>
                        <Option value='all'>全部</Option>
                        {
                            modelTypes.map(item=>(
                                <Option key={item.typeCode} value={item.typeCode}>{ item.typeName }</Option>
                            ))
                        }
                    </Select>
                </div>
                <div
                    style={{
                        display: 'inline-flex',
                        alignItems: 'center',
                        width: '240px',
                        marginRight: '1rem',
                    }}
                >
                    <span>设备名称</span>
                    <Input style={{ flex:'1', marginLeft:'0.5rem' }} value={meterName} onChange={e=>setMeterName(e.target.value)} />
                </div>
                <div
                    style={{
                        display: 'inline-flex',
                        alignItems: 'center',
                        width: '240px',
                        marginRight: '1rem',
                    }}
                >
                    <span>注册码</span>
                    <Input
                        value={registerCode}
                        style={{ flex: '1', marginLeft: '0.5rem' }}
                        onChange={(e) =>setRegisterCode(e.target.value)}
                    />
                </div>
                <div style={{ marginLeft: '1rem' }}>
                    <Button
                        type="primary"
                        icon={<SearchOutlined />}
                        style={{ marginRight: '0.5rem' }}
                        onClick={() => {
                            onSearch({
                                energyType,
                                meterName,
                                registerCode
                            });
                        }}
                    >
                        查询
                    </Button>
                    <Button
                        icon={<ReloadOutlined />}
                        onClick={() => {
                            onSearch({});
                            setEnergyType('all');
                            setMeterName('');
                            setRegisterCode('');
                        }}
                    >
                        重置
                    </Button>
                </div>
            </div>
        </div>
    );
}

export default React.memo(TableSelector);
